<template>
    <div class="container fund">
        <van-dialog
                v-model="show"
                show-cancel-button
                :beforeClose="beforeClose"
        >
            <van-cell-group>
                <van-radio-group v-model="radio">
                    <van-radio name="0">不匿名</van-radio>
                    <van-radio name="1">匿名</van-radio>
                </van-radio-group>
            </van-cell-group>
            <van-field
                    v-model="store_code"
                    label="捐款单位"
                    placeholder="请输入捐款单位"
            />
            <van-field
                    v-model="jz_price"
                    label="金额"
                    placeholder="请输入金额"
            />
            <van-field
                    v-model="name"
                    label="姓名"
                    placeholder="请输入姓名"
            />
            <van-field
                    v-model="mobile"
                    label="电话"
                    placeholder="请输入电话"
            />
        </van-dialog>
        <img src="http://city-card.oss-cn-hangzhou.aliyuncs.com/guarantee_medical/fund_header.png" class="hd-img-responsive"/>
        <div class="stat hd-shadow">
            <div class="item van-hairline--right">
                <div class="title">募捐总额</div>
                <div class="price"><em>¥</em>{{info.jz_price}}</div>
            </div>
            <div class="item van-hairline--right">
                <div class="title">垫付总额</div>
                <div class="price"><em>¥</em>{{info.df_price}}</div>
            </div>
            <div class="item">
                <div class="title">还款总额</div>
                <div class="price"><em>¥</em>{{info.hk_price}}</div>
            </div>
        </div>
        <van-button type="primary" plain class="want-fund" @click="medicalcreate()">我要捐款</van-button>
        <van-cell-group class="rank">
            <van-cell
                    v-for="(item, index) in rankinglist" :key="index"
                    :title="'第'+(index+1)+'名'"
                    :value="'¥'+item.price"
                    :label="item.name"
            />
<!--            <van-cell title="第三名" value="¥500000" label="沈阳经济区旅游服务中心" />-->
        </van-cell-group>
        <van-tabs v-model="active" sticky>
            <van-tab title="募捐明细">
                <van-cell-group class="fund-detail">
                    <van-cell
                            v-for="(item, index) in recordlist" :key="index"
                            :title="item.name+'  '+item.mobile"
                            :value="'¥'+item.price"
                            :label="item.create_time" />
                    <van-cell title="张晓 13099998888" value="¥100" label="2019-10-9 12:30" />
                    <van-cell title="匿名" value="¥50" label="2019-10-9 12:30" />
                </van-cell-group>
            </van-tab>
            <van-tab title="垫付明细">
                <van-cell-group class="help-detail">
                    <van-cell title="张晓 13099998888" value="¥3000" label="2019-10-9 12:30" />
                    <van-cell title="张晓 13099998888" value="¥10000" label="2019-10-9 12:30" />
                    <van-cell title="宋小英 13098765678" value="¥5000" label="2019-10-9 12:30" />
                </van-cell-group>
            </van-tab>
            <van-tab title="还款明细">
                <van-cell-group class="reback-detail">
                    <van-cell title="张晓 13099998888" value="¥3000" label="2019-10-9 12:30" />
                    <van-cell title="张晓 13099998888" value="¥10000" label="2019-10-9 12:30" />
                    <van-cell title="宋小英 13098765678" value="¥5000" label="2019-10-9 12:30" />
                </van-cell-group>
            </van-tab>
        </van-tabs>
        <van-tabbar v-model="active" style="z-index:100;">
            <van-tabbar-item icon="dianfuyewu" to="/guarantee_medical_index">垫付医疗</van-tabbar-item>
            <van-tabbar-item icon="hezuoyiyuan" to="/guarantee_medical_hospital">合作医院</van-tabbar-item>
            <van-tabbar-item icon="shiyongshuoming" to="/guarantee_medical_tips">使用说明</van-tabbar-item>
            <van-tabbar-item icon="jiuyixuqiu" to="/guarantee_medical_record">就医记录</van-tabbar-item>
            <van-tabbar-item icon="mujuanzijin" to="/guarantee_medical_fund">爱心募捐</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
export default {
  name: 'fund',
  data () {
    return {
      value: 1,
      rankinglist: [],
      recordlist: [],
      info: {},
      show: false,
      radio: '0',
      store_code: '',
      jz_price: '',
      name: '',
      mobile: ''
    }
  },
  methods: {
    init () {
      this.$http({
        fun: 'medicalprice',
        requestType: 'get',
        cb: res => {
          console.log(res)
          this.info = res
        }
      })
      this.$http({
        fun: 'mnlogin',
        requestType: 'get',
        cb: res => {
          console.log(res)
        }
      })
      this.$http({
        fun: 'rankinglist',
        requestType: 'get',
        cb: res => {
          console.log(res)
          this.rankinglist = res
          this.rankinglist.forEach(item => {
            console.log('111')
          })
        }
      })
      this.$http({
        fun: 'recordlist',
        type: '3',
        cb: res => {
          console.log(res)
          this.recordlist = res.results
          this.recordlist.forEach(item => {
            console.log('111')
          })
        }
      })
    },
    beforeClose (action, done) {
      if (action === 'confirm') {
        setTimeout(done, 1000)
        console.log('ssssss')
        console.log(this.store_code)
        console.log(this.radio)
        this.$http({
          fun: 'medicalcreate',
          store_code: this.store_code,
          price: this.jz_price,
          name: this.name,
          mobile: this.mobile,
          mode: this.radio,
          cb: res => {
            console.log(res)
            this.info = res
          }
        })
      } else if (action === 'cancel') {
        done() // 关闭
      }
    },
    medicalcreate () {
      console.log('11111')
      this.show = true
      this.store_code = ''
      this.jz_price = ''
      this.name = ''
      this.mobile = ''
      this.radio = '0'
    }
  },

  mounted () {
    this.init()
  }
}
</script>

<style src="./index.css" scoped>
</style>
